<template>
  <view class="message-page">
    <!-- 占位：避免原生 titleNView 覆盖顶部内容 -->
    <view class="top-space"></view>
    
    <view class="content">
      <view class="message-list">
        <view 
          v-for="(message, index) in messages" 
          :key="index" 
          class="message-card"
          @click="openChat(message)"
        >
          <view class="avatar" :style="avatarStyle(message)">{{ message.username.slice(0,1) }}</view>
          <view class="message-content">
            <view class="user-info">
              <text class="username">{{ message.username }}</text>
              <text class="time">{{ message.time }}</text>
            </view>
            <text class="preview">{{ message.preview }}</text>
          </view>
          <view class="message-status">
            <view v-if="message.unread > 0" class="unread-badge">{{ message.unread > 99 ? '99+' : message.unread }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MessagePage',
  data() {
    return {
      messages: [
        { username: '小张', preview: '你好，关于那个任务...', time: '10:30', unread: 2 },
        { username: '米米', preview: '资料已经发送，请查收', time: '昨天', unread: 0 },
        { username: '阿凯', preview: '维修时间可以安排在...', time: '昨天', unread: 5 },
        { username: '玲玲', preview: '快递已取，马上送达', time: '前天', unread: 0 },
        { username: '家政小王', preview: '明天上午有时间吗？', time: '前天', unread: 1 },
        { username: '小刘', preview: '餐已取，正在返回', time: '05/15', unread: 0 }
      ]
    }
  },
  methods: {
    avatarStyle(message) {
      // 根据用户名生成不同的背景色
      const colors = [
        'linear-gradient(135deg,#6dd5ed 0%,#2193b0 100%)',
        'linear-gradient(135deg,#f6d365 0%,#fda085 100%)',
        'linear-gradient(135deg,#a1c4fd 0%,#c2e9fb 100%)',
        'linear-gradient(135deg,#d4fc79 0%,#96e6a1 100%)'
      ]
      const index = message.username.charCodeAt(0) % colors.length
      return {
        background: colors[index],
        color: '#fff'
      }
    },
    
    openChat(message) {
      // 跳转到聊天详情界面
      uni.navigateTo({
        url: `/pages/message/chat?username=${encodeURIComponent(message.username)}`
      })
    }
  }
}
</script>

<style scoped>
.message-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
  box-sizing: border-box;
}

/* 顶部占位：让页面内容不被原生 titleNView 覆盖 */
.top-space {
  height: 54px;
  width: 100%;
}

.content {
  flex: 1;
  padding: 12px;
  box-sizing: border-box;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message-card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 8px 18px rgba(18, 24, 40, 0.06);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.message-card:active {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(18, 24, 40, 0.12);
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  margin-right: 12px;
}

.message-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px; /* 在用户名和时间之间添加间隙 */
}

.username {
  font-size: 16px;
  font-weight: 700;
  color: #16202b;
}

.time {
  font-size: 12px;
  color: #8b94a6;
}

.preview {
  font-size: 14px;
  color: #8b94a6;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp:1;
  -webkit-box-orient: vertical;
}

.unread-badge {
  background: #ff4757;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
</style>